<template>
	<view class="page-pad" v-show="allData.id" id="communication">
		<orderInfo type="manage" :order-info="allData" />
		<view class="form-items">
			<view>
				<text>收货地址</text>
				<view>{{allData.addressUsername}}，{{allData.addressTelephone}}，{{allData.address}}</view>
			</view>
			<view>
				<text>预约送达时间</text>
				<view>{{allData.showReceiveTime}}</view>
			</view>
			<view>
				<text>订单编号</text>
				<view>{{allData.sn}}</view>
			</view>
			<view>
				<text>下单用户</text>
				<view>{{ allData.memberNickname }}</view>
			</view>
			<view>
				<text>提交时间</text>
				<view>{{allData.addtime}}</view>
			</view>
			<view>
				<text>配货时间</text>
				<view>{{allData.showDistributionTime}}</view>
			</view>
			<view>
				<text>驾驶员电话</text>
				<view>{{allData.driverMobile || '无'}}</view>
			</view>
		
			<!--待运输-->
			<view v-if="allData.status != 2">
				<text>取货时间</text>
				<view>{{allData.showPickupTime}}</view>
			</view>
			<!--运输中-->
			<view v-if="allData.status ==4 || allData.status ==5">
				<text>运输时间</text>
				<view>{{allData.showTransportTime}}</view>
			</view>
			<!--已完成-->
			<view v-if="allData.status == 5">
				<text>完成时间</text>
				<view>{{allData.showCompleteTime}}</view>
			</view>
			<view class="uploadFile" v-if="allData.status == 4">
				<view><text>*</text>上传确认书</view>
				<uploadFile @setFile="setFile" />
			</view>
			<view class="uploadFile" v-if="allData.status == 5">
				<view>确认书凭证</view>
				<view class="image-list">
					<image :src="allData.completeImgUrl" mode="aspectFill" @click="priview"></image>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view hover-class="hover_class"
			@click="openDialog('goods')"
			v-if="allData.status == 2">确认取货</view>
			<view hover-class="hover_class"
			 @click="openDialog('transport')"
			 v-if="allData.status == 3">开始运输</view>
			<view hover-class="hover_class"
			 @click="openDialog('over')"
			 v-if="allData.status == 4">完成订单</view>
		</view>
		<centerPop ref="tipsPop" :content="tips[checkType].content" :title="tips[checkType].title" @save="saveData" />
	</view>
</template>

<script>
import orderInfo from '@/component/orderInfo/index.vue'
import uploadFile from '@/component/uploadFile/index.vue'
import {
	orderDetail,
	changeStatus
} from 'utils/api/order.js'
import config from 'static/js/config.js'
export default {
	data() {
		return {
			allData: {
				completeImgUrl: '',
				productList: []
			},
			tips: {
				'goods': { title: '取货', content: '确认取货吗?' },
				'transport': { title: '开始运输', content: '确认开始运输吗?' },
				'over': { title: '完成订单', content: '确认订单已完成吗?' },
			},
			checkType: 'goods',
			headerColor: {
				...config.order_color,
				5: '#F8F8F8'
			},
			icons: ''
		}
	},
	components: {
		orderInfo,
		uploadFile
	},
	async onLoad(data) {
		this.updateHeader(data)
		await this.getDetail(data.id)
		if(data.key) {
			this.$nextTick(() => {
				this.setBottom()
			})
		}
	},
	methods: {
		// 确认完成滚动底部
		setBottom() {
			setTimeout(() => {
				wx.pageScrollTo({
					scrollTop: 99999,
					duration: 100 // 滑动速度
				})
			}, 10)
		},
		priview() {
			uni.previewImage({
				current: 0, //预览图片的下标
				urls: [this.allData.completeImgUrl] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		setFile(data) {
			if(data && data.length !== 0) {
				this.icons = data[0].url
			} else {
				this.icons = ''
			}
		},
		updateHeader(data) {
			uni.setNavigationBarColor({
				frontColor: data.status == 5 ? '#000000' : '#ffffff', // 必写项
				backgroundColor: this.headerColor[data.status]
			})
			uni.setNavigationBarTitle({ title: data.name})
		},
		getDetail(id, key) {
			return new Promise((resolve,reject) => {
				uni.showLoading({
				  title: '加载中',
				  mask: true
				})
				orderDetail({id}).then((res) => {
					this.allData = res.data
					if(key) {
						this.updateHeader({
							status: res.data.status,
							name: res.data.statusName
						})
					}
				}).finally(() => {
					uni.hideLoading()
					resolve()
				})
			})
		},
		saveData(respone) {
			const questData = {
				'goods': { api: changeStatus, data: {status: '3',id: this.allData.id} },
				'transport': { api: changeStatus, data: {status: '4',id: this.allData.id} },
				'over': { api: changeStatus, data: {status: '5',id: this.allData.id, complete_img: this.icons} },
			}
			uni.showLoading({
				title: '保存中',
				mask: true
			})
			const dataType = questData[this.checkType]
			dataType.api(dataType.data).then((res) => {
				uni.hideLoading()
				uni.showToast({ title: '操作成功', icon: 'none'})
				setTimeout(() => {
					this.getDetail(this.allData.id, 'update')
				}, 600)
			})
		},
		openDialog(key) {
			if(key === 'over' && !this.icons) {
				return uni.showToast({title: '请上传确认书凭证',icon: 'none'})
			}
			this.checkType = key
			this.$refs.tipsPop.open()
		},
	}
}
</script>

<style scoped lang="scss">
.form-items {
	margin-top: 32upx;
	>view {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40upx;
		>text {
			font-size: 28upx;
			color: #333333;
			display: inline-block;
			min-width: 230upx;
			margin-top: 4upx;
		}
		>view {
			font-size: 26upx;
			color: #666666;
			line-height: 40upx;
			text-align: right;
		}
	}
}
.page-pad {
	padding-bottom: 190upx !important;
}
</style>